/*
 * @Description:
 * @Autor: zhangbing
 * @Date: 2021-06-15 14:29:24
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-06-16 10:02:55
 */
import React, { Component } from 'react'
import Header from './Header/index.js'
import List from './List/index.js'
import Footer from './Footer/index.js'

export default class App extends Component {
  state = {
    todos: [
      {
        id: 0,
        things: '洗衣服',
        done: false,
      },
      {
        id: 1,
        things: '刷碗',
        done: true,
      },
      {
        id: 2,
        things: '打游戏',
        done: true,
      },
      {
        id: 3,
        things: '看书',
        done: false,
      },
    ],
  }

  addToDo = todoObj => {
    const { todos } = this.state
    this.setState({
      todos: [todoObj, ...todos],
    })
  }

  updateToDo = (id, done) => {
    const { todos } = this.state
    const newObj = todos.map(todo => {
      if (todo.id === id) return { ...todo, done: done }
      else return todo
    })
    this.setState({
      todos: newObj,
    })
  }

  deleteToDo = id => {
    const { todos } = this.state
    const newObj = todos.filter(todo => {
      return todo.id !== id
    })
    this.setState({
      todos: newObj,
    })
  }

  deleteAllDoneToDo = () => {
    const { todos } = this.state
    const newObj = todos.filter(todo => {
      return todo.done === false
    })
    console.log(newObj);
    this.setState({
      todos: newObj
    })
  }

  checkAllToDo = (done) => {
    const {todos} = this.state
    const newToDos = todos.map(todo => {
      return {...todo, done:done}
    })
    this.setState({
      todos: newToDos,
    })
  }

  render() {
    const { todos } = this.state
    return (
      <div className='App'>
        <Header addToDo={this.addToDo} />
        
        <div style={{width: '300px'}}>
          <List todos={todos} updateToDo={this.updateToDo} deleteToDo={this.deleteToDo} />
        </div>
        
        <Footer todos={todos} deleteAllDoneToDo={this.deleteAllDoneToDo} checkAllToDo={this.checkAllToDo}></Footer>
      </div>
    )
  }
}
